@use '@covalent/tokens' as tokens;
$typography: map-get(tokens.$tokens, typography);

$code-font: 'Menlo', 'Monaco', 'Andale Mono', 'lucida console', 'Courier New',
  monospace;
$padding: 16px;

:host ::ng-deep {
  overflow-x: auto;
  padding: $padding;
  display: flex;
  position: relative;

  pre,
  code {
    font-family: $code-font;
  }

  pre {
    display: block;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    font-family: $code-font;
    line-height: 1.45;
    tab-size: 2;
    -webkit-font-smoothing: auto;
    text-size-adjust: none;
    position: relative;
    border-radius: 2px;
    font-size: 0.8rem;
    width: 100%;
  }

  code {
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  div.raw {
    flex-grow: 1;
  }

  .highlight {
    display: block;
    overflow-wrap: break-word;
    margin: 0;
    font-family: map-get($typography, code-font-family);
    font-size: map-get($typography, code-font-size);
    font-weight: map-get($typography, code-font-weight);
    line-height: map-get($typography, code-line-height);
  }

  .copy-button {
    border: none;
    background: inherit;
    margin-top: -8px;
    margin-right: -8px;
  }
}
